<template>
    <div id="login">
        <p class="tit">TH - Soft</p>
        <el-form class="AccountForm" ref="AccountForm" :model="account" :rules="rules" label-position="left" label-width="0px">
            <el-form-item prop="username">
                <el-input placeholder="请输入用户名" v-model="account.username" prefix-icon="el-icon-user-solid" clearable></el-input>
            </el-form-item>

            <el-form-item prop="username">
                <el-input placeholder="请输入密码" v-model="account.pwd" :autofocus="pwdFocus" prefix-icon="el-icon-lock" show-password></el-input>
            </el-form-item>

            
            <el-button type="primary" @click.native.prevent="login" :loading="loading" style="width: 100%;">登录</el-button>
            <el-button type="text" style="margin: 0">忘记密码?</el-button>
        </el-form>

    </div>
</template>

<script>
    import {request, url} from "../api/request";

    export default {
        name: 'Login',
        components: {},
        props: {},
        data() {
            var validateAccount = (rules, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                } else {
                if (this.account.username !== '') {
                    this.account.username = value;
                    this.validateCorrect();
                }
                callback();
                }
            };
            var validatePwd = (rules, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                if (this.account.pwd !== '') {
                    this.account.pwd = value;
                    this.validateCorrect();
                }
                callback();
                }
            };
            return {
                loading: false,
                account: {
                    username: 'admin',
                    pwd: 'TQArcgCULTlNZ75YLPXPAw=='
                },
                rules: {
                username: [
                    { required: true, validator: validateAccount, trigger: 'change' }
                ],
                pwd: [
                    {required: true, validator: validatePwd, trigger: 'change'}
                ]
                },
                pwdFocus: false,
                allowLogin: true,
                checked: true
            }
        },
        computed: {},
        mounted: function () {
            // this.$loading({
            //     lock: true,
            //     text: 'Loading',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });
        },
        created() {
            let reg_user = JSON.parse(window.localStorage.getItem('register-user'));
            if (reg_user) {
                this.account.username = reg_user.username;
                this.account.pwd = '';
                this.pwdFocus = true;
            }
        },
        methods: {
            login() {
                console.log(this.account);
                request(`${url.login}`,{
                    method:'GET',
                    data:{
                        userCode:this.account.username,
                        password:this.account.pwd,
                    }
                },res=>{
                    this.loading = true;
                    if(res.code == 1){
                        localStorage.setItem('access-user', JSON.stringify(res));
                        this.$router.push({path: '/'});
                    } else {
                        this.loading = false;
                        this.$message.error("登录失败，账号或密码错误");
                    }
                })
            },
            validateCorrect(){
                console.log(this.account.pwd)
                console.log(this.account.username)
                if(this.account.pwd.trim().length > 0 && this.account.username.trim().length > 0){
                    this.allowLogin = false;
                } else {
                    this.allowLogin = true;
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    #login {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: url("../assets/login_bj.jpg") no-repeat;
        background-size: 100% 100%;

        .AccountForm {
            width: 350px;
            margin-bottom: 20px;
        }

        .tit {
            font-size: 48px;
            color: #fff;
            margin-bottom: 35px;
        }
    }
</style>
